import React, {useEffect, useState} from 'react';
import {useSettings} from '@/hooks/web/useSettings';
import {availableLanguages} from '@/locales';
import {Dropdown, MenuProps, Space} from "antd";
import {GlobalOutlined} from "@ant-design/icons";

const SlLanguageSelector: React.FC = () => {
    const {language, changeLanguage, locale} = useSettings();
    const [menuItems, setMenuItems] = useState<MenuProps['items']>([]);
    const [localName, setLocalName] = useState<string>("")
    useEffect(() => {
        const items = availableLanguages.map(lang => {
            return {
                key: lang.code,
                label: (
                    <div
                        key={lang.code}
                        className={`language-option ${language === lang.code ? 'active' : ''}`}
                        onClick={() => {
                            setLocalName(lang.name);
                            changeLanguage(lang.code as any)
                        }}
                    >
                        {lang.name}
                    </div>
                )
            }
        })
        const localItem: any = availableLanguages.find((item) => item.code === language);
        setLocalName(localItem.name)
        setMenuItems(items);
    }, [availableLanguages]);
    return (
        <div className="ml-auto text-white mr-4 text-[14px] cursor-pointer">
            <Dropdown menu={{
                items: menuItems
            }}>
                <div className={"border border-white border-solid rounded-[5px] py-1 px-4"}>
                    <Space>
                        <GlobalOutlined/>
                        {localName}
                    </Space>
                </div>
            </Dropdown>
        </div>
    );
};

export default SlLanguageSelector;